﻿PuppetPlay.Pulley = function(config){
    Kinetic.Group.apply(this, [config]);
    this._initComponents();
}
PuppetPlay.Pulley.prototype = {
    _initComponents: function () {



        var rs = PuppetPlay.Sources.Images.controls.wheel;
    
        this.add(new Kinetic.Shape({
            radius: 80,
            drawFunc: function (context) {
                context.beginPath();
                context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
                context.closePath();
                context.drawImage(rs.obj, 0, 0, rs.width, rs.height, -50, -50, rs.width, rs.height);
                this.fill(context);
            }
        }));

        var proxyRadius = 60;
        var proxy = document.createElement('div');

        proxy.className = 'pp-pulley-proxy';
		proxy.draggable = false;
        proxy.style.left = this.attrs.x - proxyRadius + 'px';
        proxy.owner = this;
        document.body.appendChild(proxy);
     
        if (PuppetPlay.Util.isMsTouch) {
            $(proxy).on('MSPointerDown.' + this.attrs.id, this.onPointerDown);
        } else {
            var that = this;
            this.proxy.addEventListener('mousedown', this.onPointerDown, false);
            document.body.addEventListener('MSPointerUp', function (e) {
                that.proxy.removeEventListener('MSPointerMove', that.onPointerMove);
                //delete this.oldPos;
            }, false);
        }
    },
    
    onPointerDown: function (e) {
        e = e.originalEvent;
        var that = this;
        var owner = this.owner;
		this.oldPos = {
		    x: e.clientX + window.pageXOffset,
		    y: e.clientY + window.pageYOffset
		};

        if(PuppetPlay.Util.isMsTouch){
            $(this).on('MSPointerMove.' + owner.attrs.id, owner.onPointerMove);
            $(document).on('MSPointerUp.' + owner.attrs.id, owner.onPointerUp);

            Kinetic.Global.pointerMap[e.pointerId] = this;
        } else {
            this.addEventListener('mousemove', this.owner.onPointerMove, false);
        }
        //console.log('Pointer down pointer:' + [this.oldPos.x, this.oldPos.y]);
    },
    
    onPointerMove: function (e) {
        e = e.originalEvent;
        var currentPos = {
            x: e.clientX + window.pageXOffset,
            y: e.clientY + window.pageYOffset
        };

        var proxy = Kinetic.Global.pointerMap[e.pointerId];
        var owner = proxy.owner;
        var center = owner.getAbsolutePosition();
        var dx1 = currentPos.x - center.x;
        var dy1 = currentPos.y - center.y;
        var dx2 = proxy.oldPos.x - center.x;
        var dy2 = proxy.oldPos.y - center.y;
        var c = Math.sqrt(dx1 * dx1 + dy1 * dy1) * Math.sqrt(dx2 * dx2 + dy2 * dy2); 
        var rotateDeg = Math.acos((dx1 * dx2 + dy1 * dy2) / c);

        if ((proxy.oldPos.x - center.x) * (currentPos.y - proxy.oldPos.y) -
            (proxy.oldPos.y - center.y) * (currentPos.x - proxy.oldPos.x) > 0) {
            rotateDeg = -rotateDeg;
        }

        if (isNaN(rotateDeg)) {
            console.log('Pulley rotate deg isNaN：' + rotateDeg);
            return;
        }

        owner.rotate(-rotateDeg);
        //this.getLayer().toRefresh = true;

        if (owner.attrs.afterRotate) {
            owner.attrs.afterRotate(rotateDeg * 20);
        }
        proxy.oldPos = currentPos;
        //console.log('Pointer move angle:' + rotateDeg / Math.PI * 180);
		//console.log('Pulley rotate angle:'+this.getRotation() / Math.PI * 180);
    },
    
    onPointerUp: function (e) {
        try {
            e = e.originalEvent;
            var proxy = Kinetic.Global.pointerMap[e.pointerId];
            var owner = proxy.owner;
            delete Kinetic.Global.pointerMap[e.pointerId];
        
            $(proxy).off('MSPointerMove.' + owner.attrs.id, owner.onPointerMove);
            $(this).off('MSPointerUp.' + owner.attrs.id, owner.onPointerUp);
        } catch (e) {
        }
    },
    
    getJointPoint: function(x, y){
        var center = this.getAbsolutePosition();
        var centerX = center.x;
        var centerY = center.y;
        var d = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
        var r = 20;
        var alpha = Math.acos(r / d); 
        var beta = Math.atan((y - centerY)/(x - centerX));
        return [
            centerX + r * Math.cos(beta + alpha),
            centerY + r * Math.sin(beta + alpha),
            centerX + r * Math.cos(beta - alpha),
            centerY + r * Math.sin(beta - alpha),
        ];
    }
};
Kinetic.Global.extend(PuppetPlay.Pulley, Kinetic.Group);